<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>积分商城</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
	<link rel="stylesheet" href="css/wzl-bootstrap.css" />
	<link rel="stylesheet" href="css/goods.css" />
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

</head>

<body>
<div id="goods-nav">
	<nav class="wzl-navbar navbar-default" role="navigation" >
		<div class="container-fluid">
			<div class="navbar-header">
				<div class="wzl-nav-bar" onclick="history.back(-1)">
					<span class="glyphicon glyphicon-wzl-back" ></span>积分商城
				</div>
			</div>
		</div>
	</nav>
</div>

<div id="goods-section">
	<ul class="container-fluid">
		<li class="row">
			<div class="goodsInfo-left col-xs-5"><img src="img/goods/guzhen.jpg" alt="" /></div>
			<div class="goodsInfo-right col-xs-7">
				<p><span >南浔古镇门票</span> </p>
				<span>价格：80元~190元</span><br>
				<span class="detail"><a href="views/guzhen.html">详情>></a></span>
				<span class="stamp"><img src="img/goods/stamp.png" alt="" /></span>

			</div>
		</li>
		<li class="goods-guzhen">
			<span value="80" class="active">成人票</span>
			<span value="150" class="">双人套餐</span>
			<span value="120" class="">一大一小(亲子票)</span>
			<span value="190" class="">2大1小(家庭票)</span>
			<span value="40" class="">儿童票(身高含1.2-1.4M)</span>
		</li>
		<li class="col-xs-12 multipleSelection" id="guZhenSelection">
			<div class="">金额：<span class="payMoney" value="80">80元</span></div>
			<div class="">(免费领<span class="points" value="80">80</span>元等值足彩)</div>
			<div class=""><span class="quantityReduce">-</span><input type="text" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
		</li>
		<li class="col-xs-10 col-xs-offset-1 goumai">立即购买</li>
	</ul>
	<ul class="container-fluid">
		<li class="row">
			<div class="goodsInfo-left col-xs-5"><img src="img/goods/xiazhuhu.jpg" alt="" /></div>
			<div class="goodsInfo-right col-xs-7">
				<p><span>下渚湖景区成人票</span> <!--<span >200元/每张</span>--></p>
				<span>价格：60元/每张</sapn><br/>
					<!--<span class="recommend">门票介绍</span><br/>-->
						<span class="detail"><a href="views/xiazhuhu.html">详情>></a></span>
						<span class="stamp"><img src="img/goods/stamp.png" alt="" /></span>
			</div>
		</li>
		<li class="col-xs-12 singleSelection">
			<div class="">金额：<span class="payMoney" value="60">60元</span></div>
			<div class="">(免费领<span class="points" value="60">60</span>元等值足彩)</div>
			<div class=""><span class="quantityReduce">-</span><input type="text" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
		</li>
		<li class="col-xs-10 col-xs-offset-1 goumai">立即购买</li>
	</ul>
	<ul class="container-fluid">
		<li class="row">
			<div class="goodsInfo-left col-xs-5"><img src="img/goods/tianchi.jpg" alt="" /></div>
			<div class="goodsInfo-right col-xs-7">
				<p><span>安吉江南天池汤泉门票</span> <!--<span >200元/每张</span>--></p>
				<span>价格：198元/每张</sapn><br/>
					<!--<span class="recommend">门票介绍</span><br/>-->
						<span class="detail"><a href="views/tianchi.html">详情>></a></span>
						<span class="stamp"><img src="img/goods/stamp.png" alt="" /></span>
			</div>
		</li>
		<li class="col-xs-12 singleSelection">
			<div class="">金额：<span class="payMoney" value="198">198元</span></div>
			<div class="">(免费领<span class="points" value="198">198</span>元等值足彩)</div>
			<div class=""><span class="quantityReduce">-</span><input type="text" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
		</li>
		<li class="col-xs-10 col-xs-offset-1 goumai">立即购买</li>
	</ul>
</div>
<div class="pay-container">
	<ul>
		<li>订单金额：<span class="money">200元</span> <b class="btn-close">x</b></li>
		<li>
			需要支付<br>
			<div class="money Money">200元</div>
		</li>
		<li class="btn" >微信支付</span></li>
	</ul>
</div>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script src="js/goods.js"></script>
<script>
    var  payMoneyValue,
        multiplePayMoneyValue,
        pointsValue;
    var totalAmount;//总价
    $(".goods-guzhen").on('click','span',function(e){
        $(this).addClass('active').siblings().removeClass("active");
        var mount=$(this).parent().next().children().children("input[class='quantity']").attr('value');
        multiplePayMoneyValue=$(this).attr("value");
        $(this).parent().next().children().eq(0).children().attr("value",multiplePayMoneyValue);
        $(this).parent().next().children().eq(1).children().attr("value",multiplePayMoneyValue);
        $(this).parent().next().children().eq(0).children().html(mount*multiplePayMoneyValue+"元")
        $(this).parent().next().children().eq(1).children().html(mount*multiplePayMoneyValue)
    })
    $('#goods-section ul li').on('click','.quantityReduce',function(e){
        var mount=$(this).siblings("input").attr('value');
        mount--;
        multiplePayMoneyValue=$(this).parent().parent().prev().children().children("span[class='active']").attr("value");
        payMoneyValue=$(this).parent().siblings().eq(0).children("span[class='payMoney']").attr('value');
        pointsValue=$(this).parent().siblings().eq(1).children("span[class='points']").attr('value');
        if(multiplePayMoneyValue){
            $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");
            $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);
        }else{
            $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");
            $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);
        }
        if(mount<1){
            mount=1;
            if(multiplePayMoneyValue){
                $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");
                $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);
            }else{
                $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");
                $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);
            }
        }
        $(this).siblings("input").attr('value',mount);
    })
    $('#goods-section ul li').on('click','.quantityAdd',function(){
        var mount=$(this).siblings("input").attr('value');
        mount++;
        multiplePayMoneyValue=$(this).parent().parent().prev().children().children("span[class='active']").attr("value");
        payMoneyValue=$(this).parent().siblings().eq(0).children("span[class='payMoney']").attr('value');
        pointsValue=$(this).parent().siblings().eq(1).children("span[class='points']").attr('value');
        if(multiplePayMoneyValue){
            $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");
            $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);
        }else{
            $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");
            $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);
        }
        $(this).siblings("input").attr('value',mount);
    })
    $('.quantity').change(function(event) {
        event.stopPropagation();
        mount=$(this).val();
        multiplePayMoneyValue=$(this).parent().parent().prev().children().children("span[class='active']").attr("value");
        payMoneyValue=$(this).parent().siblings().eq(0).children("span[class='payMoney']").attr('value');
        pointsValue=$(this).parent().siblings().eq(1).children("span[class='points']").attr('value');
        if(multiplePayMoneyValue){
            $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");
            $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);
        }else{
            $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");
            $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);

        }
        $(this).siblings("input").attr('value',mount);
    })
    $('.goumai').on('click',function(){
        //debugger;
        mount=$(this).prev().children().eq(2).children("input[class='quantity']").attr("value");
        payMoneyValue=$(this).prev().children().eq(0).children().attr("value");
        points=$(this).prev().children().eq(1).children().attr("value");
        totalAmount = mount*payMoneyValue;
        $('.money').html(mount*payMoneyValue+"元");
        $('.pay-container').addClass('payBlockContainer');
        localStorage.setItem('mount',mount);
        var className=$(this).prev().prev().attr('class');
        console.log(className);
        var menPiaoName;
        if(className=="goods-guzhen"){
            menPiaoName="南浔古镇门票";
        }else if(className=="row"){
            menPiaoName=$(this).prev().prev().children().eq(1).children().eq(0).children().text();
            console.log(menPiaoName)
        }
        localStorage.setItem('menPiaoName',menPiaoName);

    })
    $('.btn').on('click',function(){
        var points=$(".Money").text().replace("元","");
        localStorage.setItem("points",points);
        //openid登录，不行就unionId登录，在不行就跳登录页
        var openid = window.localStorage.getItem("openid");
        var p = {};
        var json = {};
        json.wxOpenId = openid;
        p.paramStr = JSON.stringify(json);
        //后台利用openId登录
        Common.ajaxWithParamBack("/fenful/api/v1/login/wxOpenIdLogin", p, function(obj) {
            var _path = "/fenful/h5/goods.html";
            window.localStorage.setItem("_path", _path);
            if(obj.code == "200"){
                var data = eval('(' + obj.data + ')');
                var token = data.token;
                var phoneNum = data.phoneNum;
                if(token&&phoneNum){
                    window.localStorage.setItem("phoneNum", phoneNum);
                    window.localStorage.setItem("token", token);
                    createOrder(phoneNum,totalAmount);
                }else{
                    window.location.href="/fenful/h5/login.html?_path="+_path;

                }

            }else{
                //unionId登录
                var unionId= Common.queryGetParam("unionId");
                if(!unionId){
                    //非第三方跳转，又不能openid登录，直接跳登录页
                    window.location.href="/fenful/h5/login.html?_path="+_path;
                }
                //unionId登录
                var param = {};
                var paramStr = {};
                paramStr.wxOpenId = openid;
                paramStr.unionId = unionId;
                param.paramStr = JSON.stringify(paramStr);
                Common.ajaxWithParamBack("/fenful/api/v1/login/hzLogin", param, function(m) {
                    if(m.code == "200"){
                        var model = eval('(' + m.data + ')');
                        token = model.token;
                        phoneNum = model.phoneNum;
                        if(token&&phoneNum){
                            window.localStorage.setItem("phoneNum", phoneNum);
                            window.localStorage.setItem("token", token);
                            createOrder(phoneNum,totalAmount);
                        }else{
                            window.location.href="/fenful/h5/login.html?_path="+_path;
                        }
                    }else{
                        layer.msg(m.msg);
                        window.location.href="/fenful/h5/login.html?_path="+_path;
                    }
                });

            }
        });



    });

    $('.btn-close').on('click',function(){
        $('.pay-container').removeClass('payBlockContainer');
    });


</script>
</body>
</html>
